<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script src="/html/ajax.js"></script>
    <script>
        window.onload  = function (){
            findContry();
        }
       async function  findContry(){
            var info = await ajaxGet("/contry/findAll");
           let str="";
           for(var i=0;i<info.length;i++){
               var contryObj = info[i];
               str += `<option value="${contryObj.id}">${contryObj.name}</option>`;
           }
           $("contrySelect").innerHTML = str;
           findCity();
        }
        function $(id){
            return document.getElementById(id);
        }

        async function  findCity(){
            var info = await ajaxGet("/city/findByContry",{contryId:$("contrySelect").value});
            var str = "";
            for(var i=0;i<info.length;i++){
                var cityObj = info[i];
                str += `<option value="${cityObj.id}">${cityObj.name}</option>`;
            }
            $("citySelect").innerHTML = str;
        }
    </script>
</head>
<body>
    <select id="contrySelect" style="width: 100px;margin-right: 50px" onchange="findCity()"></select>
    <select id="citySelect"  style="width: 100px;"></select>
</body>
</html>